<template>
  <div class="exam">
    <el-table :data="pagination.records" border :row-class-name="tableRowClassName">
      <el-table-column fixed="left" prop="subject" label="试卷名称" width="180"></el-table-column>
      <el-table-column prop="question" label="题目信息" width="490"></el-table-column>
      <el-table-column prop="section" label="所属章节" width="200"></el-table-column>
      <el-table-column prop="type" label="题目类型" width="200"></el-table-column>
      <el-table-column prop="score" label="试题分数" width="150"></el-table-column>
      <el-table-column prop="level" label="难度等级" width="133"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[6, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      class="page"
    ></el-pagination>
  </div>
</template>

<script>
import { ref, onMounted, getCurrentInstance } from 'vue'; // Vue 3 Composition API

export default {
  name: 'ExamList', // 给组件起个名字
  setup() {
    // 使用响应式数据
    const pagination = ref({
      current: 1, // 当前页
      total: null, // 记录条数
      size: 6, // 每页条数
      records: [] // 存储试题数据
    });

    // 获取当前 Vue 实例的上下文，访问 $axios
    const { proxy } = getCurrentInstance();

    // 获取数据函数
    const getAnswerInfo = () => {
      // 分页查询所有试卷信息
      proxy.$axios(`/api/answers/${pagination.value.current}/${pagination.value.size}`)
        .then((res) => {
          pagination.value = res.data.data;
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    };

    // 改变当前记录条数
    const handleSizeChange = (val) => {
      pagination.value.size = val;
      getAnswerInfo();
    };

    // 改变当前页码，重新发送请求
    const handleCurrentChange = (val) => {
      pagination.value.current = val;
      getAnswerInfo();
    };

    // 为表格行应用不同的类名
    const tableRowClassName = ({ rowIndex }) => {
      return rowIndex % 2 === 0 ? 'warning-row' : 'success-row';
    };

    // 页面加载时获取数据
    onMounted(() => {
      getAnswerInfo();
    });

    return {
      pagination,
      handleSizeChange,
      handleCurrentChange,
      tableRowClassName
    };
  }
};
</script>

<style lang="less" scoped>
.exam {
  padding: 0px 40px;
  .page {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .edit {
    margin-left: 20px;
  }
}

.el-table .warning-row {
  background: #000 !important;
}

.el-table .success-row {
  background: #dd5862;
}
</style>
